<template>
  <div class="home-view">
    <div class="map-layer"
         id="map"></div>
    <!-- <div class="ui-layer"></div> -->
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

const init = () => {
  const bounds = L.latLngBounds(L.latLng(0, 0), L.latLng(-256, 256));// 边界

  const map = L.map('map', {
    maxBounds: bounds,
    center: [-102, 148],
    crs: L.CRS.Simple,
    zoomControl: false,
    attributionControl: false,
    maxZoom: 7,
    minZoom: 4,
    zoom: 5,
  })

  map.on('click', (wl: any) => {
    const cordinate = wl.latlng
    console.log(cordinate)
  })

  L.tileLayer('images/map/{z}/{x}/{y}.png', {
    minZoom: 4,
    maxZoom: 7,
    noWrap: true,
    bounds
  }).addTo(map);

  const markerList = [
    {
      lat: '-88.125',
      lng: '139.40625',
      areaName: '苍风高地'
    },
    {
      lat: '-99.96875',
      lng: '125.71875',
      areaName: '碧水源'
    }
  ]
  const markers = markerList.map((val: any) => {
    const { lat, lng, areaName } = val
    const marker = L.marker([lat, lng], {
      icon: L.divIcon({
        className: 'map-mark-item',
        html: `<div class="area-mark-item">${areaName}</div>`
      })
    })
    return marker
  })
  /* L.marker([-99.96875, 125.71875], {
    icon: L.divIcon({
      className: 'map-mark-item',
      html: '<div class="area-mark-item">碧水源</div>'
    })
  }).addTo(map); */
  const areNameLayerGroup = L.layerGroup(markers)
  areNameLayerGroup.addTo(map)

  const pointMarkerList = [
    {
      lat: '-99.53125',
      lng: '131.65625',
      iconId: 1
    },
    {
      lat: '-90.5625',
      lng: '144.6562',
      iconId: 1
    }
  ]
  const pointerMarkers = pointMarkerList.map((val: any) => {
    const { lat, lng, iconId } = val
    const iconUrl = `images/map-icon/${iconId}.png`
    const marker = L.marker([lat, lng], {
      icon: L.divIcon({
        className: 'map-point-item',
        html: `<div class="point-item-container">
        <div class="point-pic" style="background-image: url(${iconUrl})"></div>
        </div>`
      })
    })
    return marker
  })
  const pointLayerGroup = L.layerGroup(pointerMarkers)
  pointLayerGroup.addTo(map)

  console.log('init', map)
}

onMounted(() => {
  init()
})
</script>

<style lang="less" scoped>
.home-view {
  position: relative;
  // width: 100vh;
  height: 100vh;

  .map-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
